<template>
  <div flex class="layout">
    <base-layout
      bgColor="#FAFAFA"
      style="width: 250px"
      :operateButtonSwitch="false"
      :showTitle="false"
    >
      <div slot="main" class="box" >
        <div class="searchFor">
          <el-input
            v-model="pageModel.CodeOrName"
            placeholder="任务名称\业务员\项目经理"
            style="width: 230px"
            class="input"
			@input="leftSearch"
          ></el-input>
        </div>
		<div class="whole_module" v-if="bugList != 0" >
        	<div class="whole" v-for="(item, index) in bugList" :key="index" @click="GetBillList(item.billid,item.projectName)" v-loading="leftLoading">
        	  <div class="module" :style="styleColor(item)">
        	    <div class="first">
        	      <span class="left">{{ item.projectName }}</span>
        	      <span class="offside" :style="textColor(item.proStateName)">{{ item.proStateName }}</span>
        	    </div>
        	    <div class="second">
        	      <div class="flex" style="margin-bottom: 15px">
        	        <span>总BUG：{{ item.allBugs }}</span>
        	        <span>未安排：{{ item.notStarBugs }}</span>
        	      </div>
        	      <div class="flex">
        	        <span>修改中：{{ item.modifying }}</span>
        	        <span>已完成：{{ item.overBugs }}</span>
        	      </div>
        	    </div>
        	    <el-progress :percentage="50" :stroke-width="10" text-color="#ffffff"></el-progress>
        	  </div>
        	</div>
		</div>
		<div class="whole noData"  style="margin-top: 42px" v-else v-loading="leftLoading">
			<span>暂无数据</span>
		</div>
      </div>
    </base-layout>
    <base-layout
      ref="layout"
      @search="search"
      @pageChange="pageChange"
      :isPage="true"
      :showTitle="false"
      @onFuncBtn="getFuncBtn"
      bgColor="#FAFAFA"
      style="width: calc(100% - 250px)"
      :querySwitch="true"
      :searchList="searchList"
	  :fixedButton="true"
	  @onFixedBtn="onFixedBtn"
	  :fixedButtonList="fixedButtonList"
    >
      <div slot="main" slot-scope="{ tableHeight }" style="height: 100%">
        <base-table
          ref="customtable"
          :showIndex="false"
          :slotrow="true"
          :tabLoading.sync="tabLoading"
          :tableHeight="tableHeight"
          :tableData="tableData"
          :tableColumn="tableColumn"
          @sortChange="sortChange"
          @radioChange="radioChange"
          @doubleClick="doubleClick"
          id="printMe"
		  v-loading="rightLoading"
        >
          <template v-slot:operate="{ row }">
            <span @click="arrange(row.row)" style="color: #0000bf; cursor: pointer"
              >任务安排</span
            >
          </template>
		<template v-slot:createDate="{ row }">
			<span>{{ formatTime(row.row.createDate) }}</span>
		</template>
        </base-table>
      </div>
    </base-layout>
    <right-drawer ref="rightDrawer" :ids="ids"></right-drawer>
    <textarea id="input" style="position: absolute; top: 0; left: 0; opacity: 0; z-index: -10" >复制的</textarea>
	<base-dynamic-column ref="baseDynamicColumn" :id="186" @Refresh="Refresh"></base-dynamic-column>
	<editor ref="editor" :projectName="projectName" :documentId="documentId" @renew="GetBillList"></editor>
  </div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import configData from "./configData";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseDynamicColumn from '@/components/base/baseDynamicColumn';
import Editor from './Editor'
import { dataDictionaryGetBillList } from "@/api/apis/dataDictionary";
import { GetProjectBugList,GetBillList,GetBillData,DelData } from '@/api/apis/bugManage'
import { GetDataSourcePerson } from "@/api/apis/documentManagement";
import rightDrawer from './rightDrawer';

export default {
	components: {
		baseLayout,
		baseTable,
		baseDialog,
		rightDrawer,
		baseDynamicColumn,
		Editor
	},
	data() {
		return {
			textarea: '',
			tabLoading: false,
			pageModel: {
				page: 1,
				limit: 20,
				Sequence: "",
				SequenceName: "",
				CodeOrName: "",
			},
			Chuanshen: {
				page: 1,
				limit: 20,
				Sequence: "",
				SequenceName: "",
				projectID: '',
				state: '',
				bugLevel: '',
				bugType: ''
			},
			selected: [], //选中数据,
			visible: false,
			// tableColumn: configData.tableColumnJson, //表头
			tableColumn: [],
			tableData: [], //表体
			searchList: configData.searchList,
			searchFor: '',
			bugList: [],
			allField: [],
			leftLoading: false,
			rightLoading: false,
			timer: null,
			fixedButtonList: [
				{
					icon: 'el-icon-s-operation',
					title: '筛选'
				},
			],
			documentId: '',
			projectName: '',
			ids: {
				billid: '',
				projectID: ''
			}
		};
	},
	mounted() {
		this.init();
		document.addEventListener('click', this.closeMsg);
	},
	computed: {
		styleColor() {
			return (item) => {
				if (item.proStateName == "进行中") {
					return { 'background': 'linear-gradient(154deg, #5EC0FF 0%, #308CFF 100%, #308CFF 100%)','color' : '#fff' }
				} else if (item.proStateName == "已完成") {
					return { 'background': 'linear-gradient(153deg, #9AE91C 0%, #61CE0C 100%)','color' : '#fff' }
				} else if (item.proStateName == "未开始") {
					return { 'background': '#EAE7E7','color' : '#333' }
				}
			}
		},
		textColor() {
			return (item) => {
				if (item == "进行中") {
					return { 'color' : '#308CFF' }
				} else if (item == "已完成") {
					return { 'color' : '#61CE0C' }
				} else if (item == "未开始") {
					return { 'color' : '#333' }
				}
			}
		},
		textColors() {
			return (item) => {
				if (item == "进行中") {
					return { 'color' : '#fff' }
				} else if (item == "已完成") {
					return  '#fff' 
				} else if (item == "未开始") {
					return  '#333' 
				}
			}
		}
	},
	methods: {
		Refresh() {
			this.tabulation()
		},
		init() {
			this.dataDictionary()
			this.GetProjectBugList()
			Promise.all([
				this.tabulation(),
				this.GetBillList(),
			]).then((result) => {
				this.rightLoading = false
			})
		},
		closeMsg(e) {
			if (this.visible) {
				this.visible = false
			}
		},
		// 查询
		search(el){
			if (el.state == '' || !el.state) {
				this.Chuanshen.state = ''
			} else {
				this.Chuanshen.state = el.state
			}
			if (el.bugLevel == '' || !el.bugLevel) {
				this.Chuanshen.bugLevel = ''
			} else {
				this.Chuanshen.bugLevel = el.bugLevel
			}
			if (el.bugType == ''  || !el.bugType) {
				this.Chuanshen.bugType = ''
			} else {
				this.Chuanshen.bugType = el.bugType
			}
			this.GetBillList(this.documentId)
		},
		// 复制功能
		doubleClick(row, column, cell, event) {
			var text = event.target.innerText;
			var input = document.getElementById("input");
			input.value = text; // 修改文本框的内容
			input.select(); // 选中文本
			document.execCommand("copy");
			this.$notify.success({
				title: `${text}`,
				message: `已复制到剪贴板`,
				// showClose: false
			});
		},
		// 时间格式化
		formatTime(row) {
			return row && row.substring(0, 10);
		},
		// 数据字典
		async dataDictionary() {
			let params = {
        		page: 1,
        		limit: 999,
        		Sequence: "",
        		SequenceName: "",
			}
			const res = await dataDictionaryGetBillList({...params,KindId: 73})
      		if (res.code == 1) {
				this.searchList[0].options = res.data[1]
				let arrList = [];
				res.data[1].forEach((el) => {
      		      let arr = {
      		        label: el.ddd_DicDetailsName,
      		        value: el.ddd_DicDetailsID,
      		      };
      		      arrList.push(arr);
      		    });
				this.$refs.editor.topFormRow[1].elCol[1].options = arrList
      		}
			const item = await dataDictionaryGetBillList({...params,KindId: 74})
      		if (item.code == 1) {
				this.searchList[1].options = item.data[1]
				let arrList = [];
				item.data[1].forEach((el) => {
      		      let arr = {
      		        label: el.ddd_DicDetailsName,
      		        value: el.ddd_DicDetailsID,
      		      };
      		      arrList.push(arr);
      		    });
				this.$refs.editor.topFormRow[1].elCol[0].options = arrList
      		}
			const el = await dataDictionaryGetBillList({...params,KindId: 75})
      		if (el.code == 1) {
				this.searchList[2].options = el.data[1]
      		}
		},
		// 获取左侧项目
		async GetProjectBugList() {
			this.leftLoading = true
			const res = await GetProjectBugList(this.pageModel)
			if (res.code == 1) {
				this.bugList = res.data[1]
				this.bugList.forEach(el => {
					el.modifying = el.allBugs - el.notStarBugs - el.overBugs
					el.proStateName = "进行中"
				})
				this.leftLoading= false
			}
		},
		// 列表表头
		async tabulation() {
			const el = await GetDataSourcePerson({billKindID: '186'})
			if (el.code == 1) {
				this.tableColumn = el.data[1].length == 0 ? el.data[0] : el.data[1]
				this.allField = el.data[0]
				this.tableColumn.forEach(el => {
					el.tooltip = true
				});
			}
		},
		// 获取列表
		async GetBillList(id,projectName) {
			this.rightLoading = true
			if (!id) {
				id = ''
			} else {
				this.documentId = id
				this.projectName = projectName
			}
			const res = await GetBillList({...this.Chuanshen,projectID: id})
			if (res.code == 1) {
				this.$refs.layout.setPageTotal(res.data[0])
				this.tableData = res.data[1]
				this.rightLoading = false
			}
		},
		// 任务下发
		arrange(item) {
			this.ids.billid = item.billid
			this.ids.projectID = item.projectID
			this.$refs.rightDrawer.drawer = true
			this.$nextTick(() => {
				this.$refs.rightDrawer.$refs.customForm.getField("content", item.title);
			})
		},
		// 右侧固定按钮
		async onFixedBtn(item) {
			if (item.title == "筛选") {
				this.$refs.baseDynamicColumn.screen = true
				this.$refs.baseDynamicColumn.init()
			} else if (item.title == "导出") {
				// this.exportEvent(`第${this.pageModel.page}页`);
			} else if (item.title == "打印") {
				// this.duplicate();
			}
		},
		// 点击某条数据
		radioChange(val) {
			this.selected = [];
			this.selected.push(val);
		},
		// 点击按钮操作
		getFuncBtn(btnEven) {
			if (btnEven.menuName == "新增") {
				if (this.documentId == '') {
					this.$vmNews("请点击左侧选择项目");
					return;
				}
				this.$refs.editor.choiceDialog = true
			} else if (btnEven.menuName == "删除") {
				if (this.selected.length == 0) {
					this.$vmNews("请选择一条记录");
					return;
				}
				this.$confirm("确认删除吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						this.delData(this.selected[0].billid);
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消操作",
						});
					});
			} else if (btnEven.menuName == "编辑") {
				if (this.selected.length == 0) {
					this.$vmNews("请选择一条记录");
					return;
				}
				this.editDetails(this.selected[0].billid)
			}
		},
		async editDetails(id) {
			this.$refs.editor.choiceDialog = true
			this.$refs.editor.loading = true
			const res = await GetBillData({id})
			if (res.code == 1) {
				this.$refs.editor.$refs.customForm.ruleForm = res.data[0]
				this.projectName = res.data[0].projectName
				this.$refs.editor.$refs.assembly.content = res.data[0].content
				this.$refs.editor.loading = false
			}
		},
		leftSearch() {
			if (this.timer !== null) clearTimeout(this.timer)
      		this.timer = setTimeout(() => {
      		  this.GetProjectBugList()
      		}, 1000)
		},
		// 删除
		async delData(id) {
			const res = await DelData({
				id
			});
			if (res.success == "true") {
				this.$message({
					message: "删除成功",
					type: "success",
				});
				this.GetBillList();
				this.$refs.customtable.clearRadioIndex();
				this.selected = []
				this.radioIndex = false;
			}
		},
		// 分页发生改变
		pageChange(model) {
			this.pageModel.page = model.page;
			this.pageModel.limit = model.limit;
			this.GetBillList();
		},
		// 排序
		sortChange(prop, order) {
			if (order == 'ascending') {
				this.sequenceModel.Sequence = 'asc'
			}
			if (order == 'descending') {
				this.sequenceModel.Sequence = 'desc'
			}
			this.sequenceModel.SequenceName = prop
			if (!order) {
				this.sequenceModel = {}
			}
			// this.listData();
		},
	},
};
</script>
<style scoped lang="scss">
::v-deep .searchForTable {
	margin-top: -50px;
}
::v-deep .tableHeight {
	height: calc(100% - 115px) !important;
}
::v-deep .searchBox:nth-child(1) {
  width: 130px !important;
}
::v-deep .searchBox:nth-child(2) {
  width: 130px !important;
}
::v-deep .searchBox:nth-child(3) {
  width: 130px !important;
}
.whole_module {
	height: calc(100% - -63px);
	overflow: hidden;
	overflow-y: auto;
	margin-top: 42px;
}
.layout {
  .box {
    padding: 10px;
    height: calc(100% - 47px);
    .searchFor {
      display: flex;
      position: fixed;
	//   margin-top: 10px;
      .input {
        margin-right: 10px;
      }
      ::v-deep .el-icon-search {
        font-size: 20px;
        cursor: pointer;
        padding-top: 9px;
      }
    }
	.whole:nth-child(1) {
		margin-top: 0;
	}
    .whole {
      margin-top: 10px;
      .module {
        ::v-deep .el-progress__text {
          margin-left: 15px;
        }
        width: 100%;
        height: 150px;
        padding: 10px;
		cursor: pointer;
        .first {
          position: relative;
          .left {
            font-size: 15px;
            padding-top: 5px;
            display: inline-block;
          }
          .offside {
            font-size: 15px;
            display: inline-block;
            width: 70px;
            text-align: center;
            border-radius: 5px;
            padding: 4px;
            position: absolute;
            right: 0;
            height: 25px;
			background: #f2f2f2;
          }
        }
        .second {
          padding: 25px 10px 15px;
          font-size: 15px;
          .flex {
            display: flex;
            justify-content: space-around;
          }
          span {
            width: 50%;
          }
        }
      }
    }
  }
}
.noData {
	height: calc(100% - -63px);
	position: relative;
	span{
		position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%,-50%)
	}
}

::v-deep .el-progress-bar__inner {
	background-color: #f56c6c !important;
}
</style>
